import React from 'react';
import ReactDOM from 'react-dom';

import { HashRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';
// import {
//     BrowserRouter as Router,
//     Route,
//     Switch,
//     Link
// } from 'react-router-dom';

import { applyMiddleware, createStore } from 'redux'
import promiseMiddleware from 'redux-promise'
import { Provider, connect } from 'react-redux'

import './index.css';
import App from './App';
import Widget from './components/Widget';
import Welcome from './components/Welcome';
import NewPage from './components/NewPage';
import ShowWidget from './components/ShowWidget';
import registerServiceWorker from './registerServiceWorker';

import { addTodo, addUser, setName } from './store/actions'
import reducer from './store/reducers'
import ShowView from "./components/ShowView";
const store = createStore(reducer, applyMiddleware(promiseMiddleware));

let About = ({user}) => (
    <div>
        {/*<p>About: {user}</p>*/}
        <button onClick={() => {
            console.log('About click');
            store.dispatch(addTodo('Learn about actions'))
        }}>测试按钮</button>
    </div>
);

const mapStateToProps = state => {
    console.log('mapStateToProps:', state);
    return {
        user: state.user
    }
};

const mapDispatchToProps = dispatch => {
    console.log('mapDispatchToProps:', dispatch);
    return {
        onTodoClick: name => {
            dispatch(setName(name))
        }
    }
};

About = connect(
    mapStateToProps,
    mapDispatchToProps
)(About);

/*ReactDOM.render(
    (<Router>
        <div>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/topics">Topics</Link></li>
                <li><Link to="/new-page">NewPage</Link></li>
            </ul>

            <hr/>

            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/topics" component={Topics}/>
            <Route path="/new-page" component={NewPage}/>
        </div>
    </Router>),
    document.getElementById('root')
);*/

ReactDOM.render(
    (<Provider store={store}>
        <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/widget">Widget</Link></li>
                    <li><Link to="/welcome">Welcome</Link></li>
                    <li><Link to="/new-page">NewPage</Link></li>
                </ul>
                <hr/>
                <ShowWidget/>

                <Switch>
                    <Route path="/app" component={App} />
                    <Route path="/widget" component={Widget} />
                    <Route path="/welcome" component={Welcome} />
                    <Route path="/new-page" component={NewPage} />
                    <Route path="/*" component={App} />
                    <Route exact path="/" component={App} />
                </Switch>
            </div>
        </Router>
    </Provider>),
    document.getElementById('root')
);

registerServiceWorker();
